<!-- 店铺信息 store -->
<script lang="ts" setup>
import { ref, reactive } from "vue"
import { type FormInstance, type FormRules, ElMessageBox, ElMessage, type UploadProps } from "element-plus"
import { Search, Refresh } from "@element-plus/icons-vue"
import { usePagination } from "@/hooks/usePagination"
const { paginationData, handleCurrentChange, handleSizeChange } = usePagination()

// #region 店铺信息模块
const tableData = [
  {
    date: "2016-05-04",
    name: "Tom",
    state: "California",
    city: "Los Angeles"
  },
  {
    date: "2016-05-05",
    name: "Tom",
    state: "California",
    city: "Los Angeles"
  },
  {
    date: "2016-05-06",
    name: "Tom",
    state: "California",
    city: "Los Angeles"
  },
  {
    date: "2016-05-03",
    name: "Tom",
    state: "California",
    city: "Los Angeles"
  },
  {
    date: "2016-05-03",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles"
  }
]
const dialogVisible = ref(false) // 弹出框
const dialogVisibleHz = ref(false) // 详情弹出框
const formRef = ref<FormInstance | null>(null) // 表单
const currentUpdateId = ref<undefined | string>(undefined) // 判断新增和修改
const fileList1 = ref<any>([]) /**图片列表 */
const formData = reactive<any>({
  date: "",
  name: "",
  state: "",
  city: "",
  imageList: ""
}) // 添加或者修改
const formDataHz = ref<any>() // 查看详情
const formRules: FormRules = reactive({
  name: [{ required: true, trigger: "blur", message: "请输入账户名称" }]
})
const handleCreate = () => {
  formRef.value?.validate((valid: boolean) => {
    if (valid) {
      if (currentUpdateId.value === undefined) {
        // createAgencyDataApi(formData).then(() => {
        //   ElMessage.success("新增成功")
        //   dialogVisible.value = false
        //   getTableData()
        // })
        dialogVisible.value = false
      } else {
        // const data = ref<any>()
        // data.value = formData
        // data.value.user_id = currentUpdateId.value
        // updateAgencyDataApi(data.value).then(() => {
        //   ElMessage.success("修改成功")
        //   dialogVisible.value = false
        //   getTableData()
        // })
        dialogVisible.value = false
      }
    } else {
      return false
    }
  })
}
// 修改
const handleupdate = (row: any) => {
  currentUpdateId.value = row.date
  formData.name = row.name
  console.log(row, "修改")
  dialogVisible.value = true
  //
  formData.imageList = row.imageList
    ?.split(",")
    .map((item: any) => {
      return item.split("/image/")[1]
    })
    .join()
  if (row.imageList) {
    fileList1.value = row.imageList
      .substring(0, row.imageList.length - 1)
      ?.split(",")
      .map((item: any) => {
        return {
          url: item
        }
      })
  }

  console.log(fileList1.value, 1988)
}
// 查看
const handleClick = (row: any) => {
  dialogVisibleHz.value = true
  formDataHz.value = row
  console.log(row, "查看")
  console.log(formDataHz.value, "查看1")
}
// 删除操作
const handledelete = (row: any) => {
  ElMessageBox.confirm(`正在删除该合作公司，确认删除？`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    // deleteAgencyDataApi(row.user_id).then(() => {
    //   ElMessage.success("删除成功")
    //   getTableData()
    // })
    console.log("删除成功")
  })
  console.log(row, "删除")
}
// ** 清除规则报错信息
const clearValidate = () => {
  formRef.value?.resetFields()
}
// 清楚表单验证
const resetForm = () => {
  currentUpdateId.value = undefined
  clearValidate()
  console.log(11)
  fileList1.value = []
}
// 图片上传
import { getToken } from "@/utils/cache/cookies"
const dialogVisible1 = ref<boolean>(false) // 上传图片
const dialogImageUrl1 = ref<any>("")
const handlePictureCardPreview1: UploadProps["onPreview"] = (uploadFile) => {
  dialogImageUrl1.value = uploadFile.url!
  dialogVisible1.value = true
}
const handleRemove1: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
  console.log(uploadFiles, 180)
  // fileList1.value = uploadFiles
  formData.imageList = uploadFiles
    .map((item: any) => {
      return item.response?.data.split("/image/")[1]
        ? item.response?.data.split("/image/")[1]
        : item.url.split("/image/")[1]
    })
    .join(",")
  console.log(formData)

  console.log(formData.imageList, 10024)
}
const handleChageImg1 = (file: any, resfileList: any) => {
  const size = ref(2)
  const fileSizeFlag = file.size / 1024 / 1024 < size.value
  if (!fileSizeFlag) {
    ElMessage.error(`请上传不大于${size.value}M的图片!`)
    fileList1.value = resfileList.filter((item: any) => item.uid !== file.uid) /**不符合规定的图片不在照片墙展示 */
  } else {
    // fileList1.value = resfileList
    // console.log(fileList1.value, 192)
    formData.imageList = resfileList
      .map((item: any) => {
        return item.response?.data.split("/image/")[1]
          ? item.response?.data.split("/image/")[1]
          : item.url.split("/image/")[1]
      })
      .join(",")
    console.log(formData.imageList, 10023)
  }
}
const headersOpts = {
  token: getToken()
}
// #endregion

// 查
const searchFormRef = ref<FormInstance | null>(null)
const searchData = reactive({
  name: ""
})
const handleSearch = () => {
  if (paginationData.currentPage === 1) {
    // getTableData()
    console.log(1)
    console.log("查看分页")
  }
  paginationData.currentPage = 1
}
const resetSearch = () => {
  searchFormRef.value?.resetFields()
  if (paginationData.currentPage === 1) {
    // getTableData()
    console.log(2)
  }
  paginationData.currentPage = 1
}
/** 监听分页参数的变化 */
// watch([() => paginationData.currentPage, () => paginationData.pageSize], getTableData, { immediate: true })
</script>

<template>
  <div class="app-container">
    <!-- 搜索 -->
    <el-card shadow="never" class="search-wrapper">
      <el-form ref="searchFormRef" :inline="true" :model="searchData">
        <el-form-item prop="name" label="店铺名称">
          <el-input v-model.trim="searchData.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
          <el-button :icon="Refresh" @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 店铺信息模块 -->
    <el-card>
      <div class="col-top-left-top">
        <el-button type="primary" text @click="dialogVisible = true">添加店铺信息</el-button>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column fixed prop="date" label="店铺名称" width="150" align="center" />
        <el-table-column prop="name" label="店铺信息" align="center" />
        <el-table-column prop="state" label="店铺信息" align="center" />
        <el-table-column prop="city" label="店铺" align="center" />
        <el-table-column fixed="right" label="操作" align="center">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="handleupdate(scope.row)">修改</el-button>
            <el-button link type="primary" size="small" @click="handleClick(scope.row)">查看</el-button>
            <el-button link type="primary" size="small" @click="handledelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <div class="pagination">
        <el-pagination
          :layout="paginationData.layout"
          :page-sizes="paginationData.pageSizes"
          :page-size="paginationData.pageSize"
          :total="paginationData.total"
          :currentPage="paginationData.currentPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 店铺信息模块弹出框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="currentUpdateId === undefined ? '新增店铺信息' : '修改店铺信息'"
      @close="resetForm"
      width="60%"
    >
      <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px" label-position="left">
        <el-form-item prop="name" label="名字">
          <el-input v-model="formData.name" placeholder="请输入" />
        </el-form-item>
      </el-form>
      <el-form-item prop="imageList">
        <template #label>
          <span style="margin-right: 45px">展示图</span>
        </template>
        <el-upload
          :multiple="true"
          v-model:file-list="fileList1"
          action="api/order/package/upload"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview1"
          :on-remove="handleRemove1"
          :on-change="handleChageImg1"
          :headers="headersOpts"
          accept="image/*"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>
        <el-dialog v-model="dialogVisible1">
          <img w-full :src="dialogImageUrl1" alt="Preview Image" />
        </el-dialog>
      </el-form-item>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleCreate">确认</el-button>
      </template>
    </el-dialog>
    <!-- 店铺信息模块详情框 -->
    <el-dialog v-model="dialogVisibleHz" :title="'店铺信息'" width="60%">
      <el-form ref="formRefHz" :model="formDataHz" label-width="100px" label-position="left">
        <el-form-item prop="user_name" label="1">
          <el-input v-model="formDataHz.city" disabled />
        </el-form-item>
        <el-form-item prop="user_password" label="2"> <el-input v-model="formDataHz.date" disabled /> </el-form-item>
        <el-form-item prop="user_mobile" label="3">
          <el-input v-model="formDataHz.name" :maxlength="11" show-word-limit disabled />
        </el-form-item>
      </el-form>
      <el-form-item prop="imageList" disabled>
        <template #label>
          <span style="margin-right: 45px">展示图</span>
        </template>
        <el-upload
          disabled
          :multiple="true"
          v-model:file-list="fileList1"
          action="api/order/package/upload"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview1"
          :on-remove="handleRemove1"
          :on-change="handleChageImg1"
          :headers="headersOpts"
          accept="image/*"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>
        <el-dialog v-model="dialogVisible1">
          <img w-full :src="dialogImageUrl1" alt="Preview Image" />
        </el-dialog>
      </el-form-item>
      <template #footer>
        <el-button type="primary" @click="dialogVisibleHz = false">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}
// 搜索框
.search-wrapper {
  margin-bottom: 20px;
  :deep(.el-card__body) {
    padding-bottom: 2px;
  }
}
.col-top-left-top {
  margin-bottom: 20px;
}
.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
